<template>
	<view class="swiper-index">
		<swiper class="swiper" circular :indicator-dots="false" :autoplay="true" :interval="2000" :duration="500">
			<swiper-item v-for="(item,index) in swiper" :key="index">
				<view class="bg" v-if="item.flag" :style="{backgroundImage: 'url(' + item.Image + ') ' }">
					<img :src="item.top" style="width: 504rpx;height: 450rpx;overflow: visible;" mode=""></img>
					<view class="bg-left">
						<view class="title">{{item.title}}</view>
						<view class="content">{{item.content}}</view>
						<view class="info">{{item.info}}</view>
						<view class="children" v-if="item.children">

							<!-- 显示前两个项目 -->
							<view class="list" v-for="(i, x) in item.children.slice(0, 2)" :key="x">
								<image :src="i.pic" mode="" style="width: 64rpx; height: 64rpx; border-radius: 24rpx;"></image>
							</view>

							<!-- 如果有超过两个项目，显示剩余数量 -->
							<view v-if="item.children.length > 2" class="list3">
								<view
									style="width: 64rpx; height: 64rpx; display: flex; align-items: center; justify-content: center;">
									+{{ item.children.length - 2 }}
								</view>
							</view>
						</view>

					</view>
					<view class="bg-right" @click="start">开始</view>
				</view>
				<view class="bgf" v-else :style="{backgroundImage: 'url(' + item.Image + ')' }">
					<view class="bgf-top">
						<view class="con-left">{{item.fraction}}</view>
						<view class="con-right">
							<view class="top">{{item.title}}</view>
							<view class="bom">{{item.content}}</view>
						</view>
					</view>
					<view class="bgf-bom" @click="start">继续测试</view>
				</view>
			</swiper-item>
		</swiper>
		<tn-toast ref="toast"></tn-toast>
	</view>
</template>

<script>
	export default {
		name: 'Basic',
		props: {
			swiper: {
				type: Array, // 指定 prop 的类型
				default: () => [] // 默认值
			},
		},
		data() {
			return {

			}
		},
		methods: {
			start() {
				this.$emit('start')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-index {
		.swiper {
			width: 100%;
			height: 450rpx;
			text-align: center;
			margin: 0 auto 24px;
		}

		// height: 204px;
		.swiper-item {
			text-align: center;
		}

		.bg {
			position: relative;
			width: calc(100% - 96rpx);
			height: 408rpx;
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;
			margin: 32rpx auto 0;
			border-radius: 40rpx;
			padding: 0 48rpx;
			overflow: visible;
			img {
				position: absolute;
				right: -20rpx;
				bottom: 0;
			}

			.bg-left {
				position: absolute;
				left: 46rpx;
				top: 40rpx;
				text-align: left;
				width: 312rpx;
				font-weight: 500;
				color: #FFFFFF;

				.title {
					font-weight: 500;
					font-size: 24rpx;
					color: #7FE3F0;
					line-height: 36rpx;
					text-align: left;
					font-style: normal;
					text-transform: uppercase;
				}

				.content {
					font-weight: 500;
					font-size: 40rpx;
					color: #FFFFFF;
					line-height: 56rpx;
					text-align: left;
					font-style: normal;
					margin-bottom: 16rpx;
				}

				.info {
					margin-bottom: 50rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
				}

				.children {
					display: flex;

					.list {
						width: 64rpx;
						height: 64rpx;
						border-radius: 24rpx;
						// background-color: #fff;
						margin-right: 12rpx;
					}

					.list3 {
						width: 64rpx;
						height: 64rpx;
						border-radius: 24rpx;
						background: #7265E3;
						border-radius: 24rpx;
					}
				}
			}

			.bg-right {
				position: absolute;
				right: 72rpx;
				bottom: 48rpx;
				width: 200rpx;
				height: 96rpx;
				background: #FFFFFF;
				border-radius: 28rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #7265E3;
				line-height: 96rpx;
				text-align: center;
				font-style: normal;
			}
		}

		.bgf {
			position: relative;
			width: calc(100% - 96rpx);
			height: 408rpx;
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;
			margin: 32rpx auto 0;
			border-radius: 40rpx;
			padding: 0 48rpx;
			overflow: visible;
			

			.bgf-top {
				position: absolute;
				left: 36rpx;
				top: 48rpx;
				display: flex;
				.con-left {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 128rpx;
					/* 六边形的宽度 */
					height: 144rpx;
					/* 六边形的高度 (计算方式: width * sqrt(3)/2) */
					background: #8C80F8;
					margin-right: 32rpx;
					/* 使六边形在垂直方向上居中 (计算方式: height / 2) */
					/* 使六边形形状保持 */
					clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
					font-weight: 500;
					font-size: 44rpx;
					color: #FFFFFF;
					line-height: 60rpx;
					text-align: center;
					font-style: normal;
				}

				.con-right {
					width: 394rpx;

					.top {
						margin-bottom: 16rpx;
						font-weight: 500;
						font-size: 40rpx;
						color: #2D3142;
						line-height: 56rpx;
						text-align: left;
						font-style: normal;
					}

					.bom {
						font-weight: 400;
						font-size: 28rpx;
						color: #4C5980;
						line-height: 44rpx;
						text-align: left;
						font-style: normal;
					}
				}
			}

			.bgf-bom {
				position: absolute;
				bottom: 56rpx;
				left: 48rpx;
				margin: 0 auto;
				width: 558rpx;
				height: 104rpx;
				background: #7265E3;
				border-radius: 28rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 104rpx;
				text-align: center;
				font-style: normal;
			}
		}
	}
</style>